<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <el-card style="width: 600px;height: 600px;margin: 0 auto">
                <el-form label-width="80px">
                    <el-form-item label="商品标题">
                        <el-input type="text" v-model="p.title"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片">
                        <img :src="oldUrl" v-if="isShow" width="100" height="100" alt="">
                    </el-form-item>

                    <el-form-item label="商品缩略图">
                        <el-form-item>
                            <el-upload
                                    action="/upload"
                                    name="pic"
                                    limit="1"
                                    list-type="picture-card"
                                    :on-success="handleSuccess2"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                    </el-form-item>

                    <el-form-item>
                        <a href="/productList.html" target="content">
                            <el-button type="success" @click="insertProductCtt()">添加缩略图</el-button>
                        </a>
                    </el-form-item>
                </el-form>
            </el-card>

        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function() {
                return {
                    isShow:true,
                    dialogImageUrl: '',
                    dialogVisible: false,
                    p:{
                        title:"",
                        url:"",
                    },
                    oldUrl:"",
                    ctt:"",
                }
            },

            methods:{
                insertProductCtt(){
                    if (v.ctt==""){
                        v.$message.error("请选择上传的图片!");
                        return;
                    }
                    //发出添加轮播图的请求
                    axios.post("/productCtt/insert").then(function (response) {

                    })
                },
                update(){
                    if (v.p.url==""){
                        v.$message.error("请选择上传的图片!");
                        return;
                    }
                    //发出添加商品的请求
                    axios.post("/product/update",v.p).then(function (response) {
                    })
                },
                handleSuccess(response,file,fileList){
                    //response代表服务器响应的图片路径
                    v.p.url = response;
                    v.isShow = false;
                },
                handleSuccess2(response,file,fileList){
                    //response代表服务器响应的图片路径
                    v.ctt = response;
                },
                Back(){
                    location.href="productList.html";
                },
                handleRemove(file, fileList) {
                    v.isShow=true;
                    console.log(file, fileList);
                    //发出删除图片的请求
                    axios.get("/remove?url="+v.url).then(function () {
                        v.$message("服务器图片删除完成");
                        v.p.url="";
                    });
                    axios.get("/remove?url="+v.ctt).then(function () {
                        v.$message("服务器图片删除完成");
                        v.ctt="";
                    })
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                }
            },
            created:function () {
                //通过id请求需要添加商品的的商品信息
                axios.get("/product/selectById/update"+location.search).then(function (response) {
                    v.p = response.data;
                    v.oldUrl = v.p.url;
                })
            }
        })
    </script>
</html>